import React from "react";

export interface IProps {
  num: number;
  onChange?: (num: number) => void;
}

interface IState {
  msg: string;
  description: string;
}

/* export class CountComp extends React.Component<IProps> {
  // 状态初始化
  state: IState = {
    msg: "",
    description: "",
  };

  render(): React.ReactNode {
    return (
      <div>
        <button
          onClick={() => {
            this.props.onChange?.(this.props.num - 1);
          }}
        >
          -
        </button>
        <span>{this.props.num}</span>
        <button
          onClick={() => {
            this.props.onChange?.(this.props.num + 1);
          }}
        >
          +
        </button>
      </div>
    );
  }
}
 */
export const CountComp: React.FC<IProps> = function (props) {
  return (
    <div>
      <button
        onClick={() => {
          props.onChange?.(props.num - 1);
        }}
      >
        -
      </button>
      <span>{props.num}</span>
      <button
        onClick={() => {
          props.onChange?.(props.num + 1);
        }}
      >
        +
      </button>
    </div>
  );
};

/* export default function CountComp(props: IProps) {
  return (
    <div>
      <button
        onClick={() => {
          props.onChange?.(props.num - 1);
        }}
      >
        -
      </button>
      <span>{props.num}</span>
      <button
        onClick={() => {
          props.onChange?.(props.num + 1);
        }}
      >
        +
      </button>
    </div>
  );
}
 */
